<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-08-15 16:45:26
 * @LastEditors: 李小晴 2689279066@qq.com
 * @LastEditTime: 2023-04-03 14:14:54
 * @FilePath: \grazlink20\uc_sys\src\views\UserCenter\SysRole\components\Edit.vue
 * Copyright (c) 2022 by 李天惊 uf_lee@163.com, All Rights Reserved. 
-->
<script setup lang="ts">
import { PropType, watch, ref, reactive } from 'vue'
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { required } from '@/utils/formRules'

const props = defineProps({
  formData: {
    type: Object as PropType<Nullable<any>>,
    default: () => null
  },
  roleData: {
    type: Array as PropType<any>,
    default: () => []
  }
})
const defaultProps = {
  children: 'children',
  label: 'role_name'
}
console.log(props.roleData, 'roleData')
const newRoleData = ref<any[]>([])
const schema = reactive<FormSchema[]>([
  {
    field: 'role_name',
    label: '角色名称',
    component: 'Input',
    formItemProps: {
      rules: [required]
    }
  },
  {
    field: 'parent_id',
    label: '父级角色',
    component: 'TreeSelect',
    componentProps: {
      data: newRoleData,
      'check-strictly': true,
      'default-expand-all': true,
      'node-key': 'role_id',
      props: defaultProps
    }
  },
  { field: 'note', label: '描述', component: 'Input' }
])

const { register, methods, elFormRef } = useForm({
  schema
})

watch(
  () => props.formData,
  (value) => {
    if (!value) return
    const { setValues } = methods
    setValues(value)
  },
  {
    deep: true,
    immediate: true
  }
)

watch(
  () => props.roleData,
  (value) => {
    if (!value) return
    console.log(value, 'value')
    newRoleData.value = [{ role_id: '0', role_name: '=== 顶级 ===' }, ...value]
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  elFormRef,
  getFormData: methods.getFormData,
  oldFormData: props.formData
})
</script>

<template>
  <div>
    <Form @register="register" />
  </div>
</template>
